<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:rich="http://richfaces.org/rich"
   xmlns:a4j="http://richfaces.org/a4j"
   xmlns:gs="http://java.sun.com/jsf/composite/gs"
   template="/WEB-INF/templates/default.xhtml">
	<ui:define name="menu">
		<ui:include src="/protected/user/menu.xhtml" >
			<ui:param name="activeMenu" value="cliente" />
			<ui:param name="activeSubMenu" value="personaFisica" />
		</ui:include>		
	</ui:define>	
	<ui:define name="breadcrumb">
		<ui:include src="breadcrumbCreate.xhtml" />
	</ui:define>
	<ui:define name="content">
		<div class="row">
			<div class="span12">
			<h:form id="form-edit" styleClass="well form-horizontal">
				<legend>#{messages.personaFisicaData}</legend>
				<ul id="clienteTab" class="nav nav-tabs">
					<li class="active"><a href="#home" data-toggle="tab">#{messages.personaFisicaData}</a></li>
					<li><a href="#address" data-toggle="tab">#{messages.personaDireccion}</a></li>
	            </ul>
				<div id="personaContent" class="tab-content">
					<div class="tab-pane fade in active" id="home">
				    	<fieldset>
				    		<div class="control-group #{rich:findComponent('tipoDocumento').valid ? '' : 'error'} #{rich:findComponent('numeroDocumento').valid ? '' : 'error'}">
				    			<h:outputLabel value="#{messages.personaTipoDocumento}:" 
				    				for="tipoDocumento" 
				    				styleClass="control-label"/>
				    			<div class="controls">
							    	<h:selectOneMenu id="tipoDocumento" value="#{createPersonaFisicaBean.personaFisica.tipoDocumento}">
							    		<f:selectItems value="#{enumRefereceBean.tiposDocumentos}"/>
										<f:ajax event="change" 
											execute="@this" />
										<rich:validator/>
							    	</h:selectOneMenu>
				    				<h:inputText id="numeroDocumento" 
				    					style="margin-left:5px;"
				    					value="#{createPersonaFisicaBean.personaFisica.numeroDocumento}"
				    					styleClass="input-medium"
				    					placeholder="#{messages.personaNumeroDocumento}"
				    					maxlength="8">
										<f:ajax event="change" listener="#{personaFisicaBean.numeroDocumentoChangeListener}" 
											execute="@this" 
											render="form-edit:sexo form-edit:estadoCivil form-edit:apellido1 form-edit:apellido2 form-edit:primerNombre form-edit:segundoNombre form-edit:fechaNacimiento
											        form-edit:direccion-pais form-edit:direccion-provincia form-edit:direccion-localidad form-edit:direccion-calle
											        form-edit:direccion-numero form-edit:direccion-codigoPostal form-edit:direccion-piso form-edit:direccion-departamento" />
										<rich:validator/>
				    				</h:inputText>
							    	<h:message for="tipoDocumento" errorClass="help-inline"/>
				    				<h:message for="form-edit:numeroDocumento" errorClass="help-inline"/>
				    			</div> 
				    		</div>
			
				    		<div class="control-group #{rich:findComponent('sexo').valid ? '' : 'error'}">
				    			<h:outputLabel value="#{messages.personaSexo}:" 
				    				for="sexo" 
				    				styleClass="control-label"/>
				    			<div class="controls">
							    	<h:selectOneMenu id="sexo" value="#{createPersonaFisicaBean.personaFisica.sexo}">
							    		<f:selectItems value="#{enumRefereceBean.sexos}"/>
										<f:ajax event="change" 
											execute="@this" />
										<rich:validator/>
							    	</h:selectOneMenu>
							    	<h:message for="sexo" errorClass="help-inline"/>
				    			</div> 
				    		</div>
			
				    		<div class="control-group #{rich:findComponent('estadoCivil').valid ? '' : 'error'}">
				    			<h:outputLabel value="#{messages.personaEstadoCivil}:" 
				    				for="estadoCivil" 
				    				styleClass="control-label"/>
				    			<div class="controls">
							    	<h:selectOneMenu id="estadoCivil" value="#{createPersonaFisicaBean.personaFisica.estadoCivil}">
							    		<f:selectItems value="#{enumRefereceBean.estodosCiviles}"/>
										<f:ajax event="change" 
											execute="@this" />
										<rich:validator/>
							    	</h:selectOneMenu>
							    	<h:message for="estadoCivil" errorClass="help-inline"/>
				    			</div> 
				    		</div>
			
				    		<div class="control-group #{rich:findComponent('apellido1').valid ? '' : 'error'} #{rich:findComponent('apellido2').valid ? '' : 'error'}">
						    	<h:outputLabel value="#{messages.personaSearchApellidos}:"  
				    				for="apellido1" 
				    				styleClass="control-label"/>
				    			<div class="controls">
				    				<h:inputText id="apellido1" 
				    					styleClass="input-xlarge"
				    					placeholder="#{messages.personaApellido1}"
				    					value="#{createPersonaFisicaBean.personaFisica.apellido1}">
										<rich:validator/>
										<f:validateBean />
				    				</h:inputText>
				    				<h:inputText id="apellido2" 
										style="margin-left:5px;"
				    					styleClass="input-xlarge"
				    					placeholder="#{messages.personaApellido2}"
				    					value="#{createPersonaFisicaBean.personaFisica.apellido2}">
										<rich:validator/>
				    				</h:inputText>
				    				<h:message for="apellido1" errorClass="help-inline" />
				    				<h:message for="apellido2" errorClass="help-inline"/>
				    			</div> 
				    		</div>
			
				    		<div class="control-group #{rich:findComponent('primerNombre').valid ? '' : 'error'} #{rich:findComponent('segundoNombre').valid ? '' : 'error'}">
						    	<h:outputLabel value="#{messages.personaSearchNombres}:"  
				    				for="primerNombre" 
				    				styleClass="control-label"/>
				    			<div class="controls">
				    				<h:inputText id="primerNombre"
				    					styleClass="input-xlarge"
				    					placeholder="#{messages.personaPrimerNombre}" 
				    					value="#{createPersonaFisicaBean.personaFisica.primerNombre}">
										<rich:validator/>                    		
				    				</h:inputText>
				    				<h:inputText id="segundoNombre"
				    					style="margin-left:5px;"
				    					styleClass="input-xlarge"
				    					placeholder="#{messages.personaSegundoNombre}" 
				    					value="#{createPersonaFisicaBean.personaFisica.segundoNombre}">
										<rich:validator/>
				    				</h:inputText>
				    				<h:message for="primerNombre" errorClass="help-inline"/>
				    				<h:message for="segundoNombre" errorClass="help-inline"/>
				    			</div> 
				    		</div>
			
				    		<div class="control-group #{rich:findComponent('fechaNacimiento').valid ? '' : 'error'}">
						    	<h:outputLabel value="#{messages.personaFechaNacimiento}:"  
				    				for="fechaNacimiento" 
				    				styleClass="control-label"/>
				    			<div class="controls">
				    				<rich:calendar id="fechaNacimiento" 
				    					enableManualInput="true"
				    					datePattern="dd/MM/yyyy"
				    					value="#{createPersonaFisicaBean.personaFisica.fechaNacimiento}">
										<rich:validator/>
				    				</rich:calendar>
				    				<h:message for="fechaNacimiento" errorClass="help-inline"/>
				    			</div> 
				    		</div>	    			    		
				    	</fieldset>
					</div>
					<div class="tab-pane fade" id="address">
						<fieldset>
				    		<div class="control-group #{rich:findComponent('direccion-pais').valid ? '' : 'error'}">
				    			<h:outputLabel value="#{messages.direccionPais}:"
				    				for="direccion-pais" 
				    				styleClass="control-label"/>
				    			<div class="controls">
									<h:selectOneMenu id="direccion-pais" 
							    		converter="#{paisBean.converter}"
							    		value="#{personaFisicaBean.pais}">
							    		<f:selectItem itemLabel="#{messages.ingresarValor}" 
							    			noSelectionOption="true"/>
							    		<f:selectItems value="#{paisBean.allEntities}"
							    			var="var" 
							    			itemLabel="#{var.name}" />
							    		<f:ajax event="change" 
							    			execute="@this" 
							    			render="form-edit:direccion-provincia form-edit:direccion-localidad" />
							    	</h:selectOneMenu>
									<h:commandLink action="#{paisBean.showCreate}" 
										immediate="true"
										styleClass="btn btn-info" style="margin-left:5px;">
										<i class="icon-file" title="#{messages.paisCreate}"></i>	
										<h:outputText value="#{messages.paisCreate}" />
										<f:setPropertyActionListener target="#{paisBean.persistReturnView}" 
											value="#{facesContext.viewRoot.viewId}"  />
										<f:setPropertyActionListener target="#{paisBean.cancelView}" 
											value="#{facesContext.viewRoot.viewId}"  />
									</h:commandLink>
									<h:message for="direccion-pais" errorClass="help-inline"/>
				    			</div> 
				    		</div>	
				    		
				    		<div class="control-group #{rich:findComponent('direccion-provincia').valid ? '' : 'error'}">
				    			<h:outputLabel value="#{messages.direccionProvincia}:"
				    				for="direccion-provincia" 
				    				styleClass="control-label"/>
				    			<div class="controls">
									<h:selectOneMenu id="direccion-provincia" 
							    		converter="#{provinciaBean.converter}"
							    		value="#{personaFisicaBean.provincia}">
							    		<f:selectItem itemLabel="#{messages.ingresarValor}" 
							    			noSelectionOption="true"/>
							    		<f:selectItems value="#{personaFisicaBean.provincias}"
							    			var="var" 
							    			itemLabel="#{var.name}" />
							    		<f:ajax event="change"
							    			execute="@this" 
							    			render="form-edit:direccion-localidad" />
							    	</h:selectOneMenu>	    			
									<h:commandLink action="#{provinciaBean.showCreate}"
										immediate="true"
										styleClass="btn btn-info"  style="margin-left:5px;"	>
										<i class="icon-file" title="#{messages.provinciaCreate}"></i>	
										<h:outputText value="#{messages.provinciaCreate}" />
										<f:setPropertyActionListener target="#{provinciaBean.pais}" 
											value="#{personaFisicaBean.pais}"  />
										<f:setPropertyActionListener target="#{provinciaBean.persistReturnView}" 
											value="#{facesContext.viewRoot.viewId}"  />
										<f:setPropertyActionListener target="#{provinciaBean.cancelView}" 
											value="#{facesContext.viewRoot.viewId}"  />
									</h:commandLink>
									<h:message for="direccion-pais" errorClass="help-inline"/>
				    			</div> 
	    					</div>

				    		<div class="control-group #{rich:findComponent('direccion-localidad').valid ? '' : 'error'}">
				    			<h:outputLabel value="#{messages.direccionLocalidad}:"
				    				for="direccion-localidad"  
				    				styleClass="control-label"/>
				    			<div class="controls">
									<h:selectOneMenu id="direccion-localidad" 
							    		converter="#{localidadBean.converter}"
							    		value="#{createPersonaFisicaBean.personaFisica.direccion.localidad}">
							    		<f:selectItem itemLabel="#{messages.ingresarValor}" 
							    			noSelectionOption="true"/>
							    		<f:selectItems value="#{personaFisicaBean.localidades}"
							    			var="var" 
							    			itemLabel="#{var.name}" />
							    	</h:selectOneMenu>	    			
									<h:commandLink action="#{localidadBean.showCreate}"
										immediate="true"
										styleClass="btn btn-info" style="margin-left:5px;">
										<i class="icon-file" title="#{messages.localidadCreate}"></i>	
										<h:outputText value="#{messages.localidadCreate}" />
										<f:setPropertyActionListener target="#{localidadBean.provincia}" 
											value="#{personaFisicaBean.provincia}"  />
										<f:setPropertyActionListener target="#{localidadBean.persistReturnView}" 
											value="#{facesContext.viewRoot.viewId}"  />
										<f:setPropertyActionListener target="#{localidadBean.cancelView}" 
											value="#{facesContext.viewRoot.viewId}"  />
									</h:commandLink>
									<h:message for="direccion-localidad" errorClass="help-inline"/>						
				    			</div> 
				    		</div>

				    		<div class="control-group #{rich:findComponent('direccion-calle').valid ? '' : 'error'}">
				    			<h:outputLabel for="direccion-calle" 
				    				value="#{messages.direccionCalle}:" 
				    				styleClass="control-label"/>
				    			<div class="controls">
									<h:inputText id="direccion-calle"
										style="margin-left:5px;"
										value="#{createPersonaFisicaBean.personaFisica.direccion.calle}"
										styleClass="input-xlarge">
									</h:inputText>
									<h:message for="direccion-calle" errorClass="help-inline"/>
				    			</div> 
				    		</div>

				    		<div class="control-group #{rich:findComponent('direccion-numero').valid ? '' : 'error'}">
				    			<h:outputLabel for="direccion-numero" 
				    				value="#{messages.direccionNumero}:" 
				    				styleClass="control-label"/>
				    			<div class="controls">
									<h:inputText id="direccion-numero"
										style="margin-left:5px;"
										value="#{createPersonaFisicaBean.personaFisica.direccion.numero}"
										styleClass="input-small">
									</h:inputText>
									<h:message for="direccion-numero" errorClass="help-inline"/>
				    			</div> 
				    		</div>
						
				    		<div class="control-group #{rich:findComponent('direccion-piso').valid ? '' : 'error'}">
				    			<h:outputLabel for="direccion-piso" 
				    				value="#{messages.direccionPiso}:" 
				    				styleClass="control-label"/>
				    			<div class="controls">
									<h:inputText id="direccion-piso"
										style="margin-left:5px;"
										value="#{createPersonaFisicaBean.personaFisica.direccion.piso}"
										styleClass="input-small">
									</h:inputText>
									<h:message for="direccion-piso" errorClass="help-inline"/>
				    			</div> 
				    		</div>
				    		
				    		<div class="control-group #{rich:findComponent('direccion-departamento').valid ? '' : 'error'}">
				    			<h:outputLabel for="direccion-departamento" 
				    				value="#{messages.direccionDepartamento}:" 
				    				styleClass="control-label"/>
				    			<div class="controls">
									<h:inputText id="direccion-departamento"
										style="margin-left:5px;"
										value="#{createPersonaFisicaBean.personaFisica.direccion.departamento}"
										styleClass="input-small">
									</h:inputText>
									<h:message for="direccion-departamento" errorClass="help-inline"/>
				    			</div> 
				    		</div>
				    		
				    		<div class="control-group #{rich:findComponent('direccion-codigoPostal').valid ? '' : 'error'}">
				    			<h:outputLabel for="direccion-codigoPostal" 
				    				value="#{messages.direccionCodigoPostal}:" 
				    				styleClass="control-label"/>
				    			<div class="controls">
									<h:inputText id="direccion-codigoPostal"
										style="margin-left:5px;"
										value="#{createPersonaFisicaBean.personaFisica.direccion.codigoPostal}"
										styleClass="input-small">
									</h:inputText>
									<h:message for="direccion-codigoPostal" errorClass="help-inline"/>
				    			</div> 
				    		</div>				    		
						</fieldset>
					</div>
				</div>
				<div class="form-actions">
					<h:commandLink action="#{createPersonaFisicaBean.create}"
						styleClass="btn btn-primary">
						<i class="icon-ok" title="#{messages.submit}"></i>				
						<h:outputText value=" #{messages.submit}" />
					</h:commandLink>
					
					<h:link outcome="index"
						style="margin-left:5px;"
						styleClass="btn">
						<i class="icon-remove" title="#{messages.cancel}"></i>					
						<h:outputText value=" #{messages.cancel}" />
					</h:link>
				</div>
			</h:form>				
			</div>
		</div>
	</ui:define>	
</ui:composition>
